<template>
  <el-row class="tac">
    <el-col :span="24">
      <h5 class="mb-2">星际</h5>
      <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          :default-active="active"
          text-color="#fff"
          @select="change"
      >
        <el-menu-item index="1"  @click="$emit('choose', overview)">
          <el-icon><icon-menu /></el-icon>
          <span>总览</span>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>封装管理</span>
          </template>
          <el-menu-item :index="l.key" v-for="l in data" @click="$emit('choose', l)">{{l.name}}</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="3">
          <el-icon><icon-menu /></el-icon>
          <span>机器管理</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><document /></el-icon>
          <span>扇区管理</span>
        </el-menu-item>
        <el-menu-item index="5" disabled>
          <el-icon><setting /></el-icon>
          <span>其他</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
} from '@element-plus/icons-vue'
import {useStore} from 'vuex'
import { ref, onMounted } from 'vue'
import axios from 'axios'

let store = useStore()
const active = ref('1')

let overview = {
  name: 'overview',
  path: '/'
}

let data = new Array()
onMounted(() => {
    let url = store.state.server + '/node'
    axios.get(url).then(response => {
      console.log(response.data)
      for (let i = 0; i < response.data.length; i++) {
        let node = {
          name: response.data[i],
          key: '2-' + (i + 1),
          path: 'worker',
        }
        data[i] = node
      }
    }).catch((err) => {
    console.log('请求失败', err)
  })
})

let change = (key: string, _: string[]) => {
  active.value = key
}
</script>

<style scoped>

</style>
